<template>
  <div class="w-100 gwglfswtj" style="height: 100%; overflow-x: auto; overflow-y: hidden" >
    <div
      id="gwglfswtj"
      style="height: 100%; width: 2000px;position: relative"
    ></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { useFunc } from "@/hook/useFunc";

const props = defineProps({
  fswData: {
    type: Array,
    default: () => [],
  },
});
let option = {
  yAxis: {
    type: "value",
    axisLabel: {
      formatter: "{value}个",
      fontSize: 20,
      fontFamily: "OPPOSans-Regular",
    },
    nameTextStyle: {
      color: "#DEDEDE",
      fontSize: 12,
      padding: 10,
    },

    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed", //线的类型 虚线0
        opacity: 0.2, //透明度
      },
    },
  },
  xAxis: {
    type: "category",
    data: props.fswData.map((item: any) => item.name),
    axisLabel: {
      fontSize: 20,
      rotate: 45, // 设置标签倾斜的角度
            interval: 0, // 显示所有标签
      fontFamily: "OPPOSans-Regular",
    },
  },
  series: [
    {
      type: "bar",
      data: props.fswData.map((item: any) => item.value), // 示例数值数据
      label: {
            show: true, 
            color:'#00EAEA',
            fontSize: 20,
            position: 'top',
            formatter: '{c}个' 
        },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(3, 230, 254, 1)", // 顶部颜色
          },
          {
            offset: 0.01,
            color: "rgba(3, 230, 254, 0)", // 接近底部的颜色
          },
          {
            offset: 1,
            color: "rgba(3, 230, 254, 1)", // 底部颜色，透明
          },
        ]),
      },
      barWidth: "60%", // 调整柱状图的宽度
    },
  ],
};

onMounted(() => {
  let myChart = echarts.init(
    document.getElementById("gwglfswtj") as HTMLElement
  );
  myChart.setOption(option);
  const scrollContainer = document.querySelector(".gwglfswtj");
  useFunc().autoScroll(scrollContainer, "horizontal");
});
</script>

<style></style>
